<template>
  <div
    class="custom-tree-container"
    id="menu"
    ref="course-wrap"
    :style="{ height: wrapHeight + 'px' }"
  >
    <el-row class="mb15" :gutter="20">
      <el-col :xs="12" :sm="8" :md="8" :lg="2"
        ><el-button type="custom" @click="handleAdd()">新增</el-button></el-col
      >
    </el-row>

    <el-row class="menuTitle mb15">
      <el-col :span="23"
        ><div class="grid-content bg-purple" style="padding-left: 25px">
          菜单管理
        </div></el-col
      >
      <el-col :span="1"
        ><div class="grid-content bg-purple-light">操作</div></el-col
      >
    </el-row>
    <el-tree
      :data="dataArr"
      node-key="id"
      :props="defaultProps"
      accordion
      ref="tree"
      class="tree"
      :default-expanded-keys="expandedArr"
      @node-expand="nodeExpand"
      @node-collapse="nodeCollapse"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          ><b :class="'n' + data.level" style="width: 100px">{{ data.id }} </b
          >{{ data.name }}</span
        >
        <span>
          <el-button-group>
            <el-button
              type="custom"
              size="mini"
              :class="'b' + data.level"
              @click.stop="handleAdd(data)"
              class="jurisdiction"
              v-if="data.level != 3"
            >
              新增
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click.stop="handleEdit(data)"
              class="jurisdiction"
            >
              编辑
            </el-button>

            <el-button
              type="danger"
              size="mini"
              @click.stop="() => handleDelete(node, data)"
            >
              删除
            </el-button>
          </el-button-group>
        </span>
      </span>
    </el-tree>

    <Add ref="Add" :dataArr="dataArr" v-if="dataArr && dataArr.length" />
  </div>
</template>

<script>
import {
  tbMenuQueryData,
  tbMenuDelete,
  tbMenuQueryHomeData,
} from '@/api/admin/system/menu'
import webMenu from '@/mixins/webMenu.js'
import Add from './components/Add.vue'
import Bus from '@/utils/bus.js'
import { getSession, setSession } from '@/utils/session'
export default {
  mixins: [webMenu],
  components: { Add },
  data() {
    return {
      tbSysMenu: [],
      expandedArr: [], //节点展开数据
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      dataArr: [],
      wrapHeight: 500,
    }
  },
  mounted() {
    this.dataArr = this.$store.getters.menuData
    this.init()
    Bus.$on('refreshList_Menu', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    Bus.$off('refreshList_Menu')
  },
  methods: {
    init() {
      let wHeight = document.body.clientHeight
      let topDistance = this.$refs['course-wrap'].getBoundingClientRect().top
      this.wrapHeight = wHeight - topDistance - 45
    },
    //获取列表
    getList() {
      let userinfo = JSON.parse(getSession('userinfo'))
      tbMenuQueryHomeData(userinfo.id)
        .then((res) => {
          if (res.data.code == 0) {
            var data = res.data.data[0].menuList
            if (userinfo.id != -1) {
              data.forEach((e) => {
                if (e.id == 16) {
                  e.childList.forEach((k, index) => {
                    if (k.id == 47) {
                      e.childList.splice(index, 1)
                    }
                  })
                }
              })
            }

            this.dataArr = res.data.data[0].menuList
            this.$store.commit(
              'SETMENUDATA',
              JSON.parse(JSON.stringify(this.dataArr)),
            )
          }
        })
        .catch((error) => {
          reject(error)
        })
      //   tbMenuQueryData({ pId: 0 }).then((res) => {
      //     this.tbSysMenu = res.data.data;
      //     this.$store.commit(
      //       "SETMENUDATA",
      //       JSON.parse(JSON.stringify(this.tbSysMenu))
      //     );

      //   });
    },
    //更新数据默认展开节点
    nodeExpand(v) {
      this.expandedArr.push(v.id)
    },
    //更新数据默认收起节点
    nodeCollapse(v) {
      let idx = this.expandedArr.indexOf(v.id)
      if (idx == -1) return
      this.expandedArr.splice(idx, 1)
    },
    //新增
    handleAdd(row) {
      this.$refs.Add.showAddDialog_Menu(row)
    },
    //编辑
    handleEdit(row) {
      this.$refs.Add.showAddDialog_Menu(row, 2)
    },
    // 删除确认
    handleDelete(row, data) {
      this.$confirm('确定要删除' + data.name + '模块吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      tbMenuDelete(row.data.id).then((res) => {
        if (res.data.code == 0) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success',
          })
        }
      })
    },
  },
}
</script>
<style scoped>
.tree >>> .el-tree-node__content {
  height: 32px;
}
#menu .grid-content {
  height: auto;
}

#menu .el-button.b3 {
  display: none;
}

#menu .custom-tree-node .n1,
#menu .custom-tree-node .n2 {
  display: none;
}
#menu .custom-tree-node .n3 {
  padding-right: 20px;
}
.menuTitle {
  border: 1px solid #ddd;
  padding: 5px 0;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
<style>
#menu .el-tree-node__expand-icon {
  font-size: 24px;
}
#menu .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 6px;
  font-size: 24px;
}

#menu .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  border-bottom: 1px solid #ddd;
  margin: 10px 0;
}
#menu .el-tree-node__content {
  padding: 5px 0;
}
/* .admin-content{
  position: unset;
} */
div#menu {
  padding-bottom: 110px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>